<template>
  <div class="search">
<!--导航栏-->
    <div style="display: flex">
      <NavBarItem :link="'/search/searchsong/' + key">单曲</NavBarItem>
      <NavBarItem :link="'/search/searchsinger/' + key">歌手</NavBarItem>
      <NavBarItem :link="'/search/searchalbum/' + key">专辑</NavBarItem>
      <NavBarItem :link="'/search/searchvideo/' + key">视频</NavBarItem>
      <NavBarItem :link="'/search/searchsonglist/' + key">歌单</NavBarItem>
    </div>
<!-- 路由映射-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <keep-alive>
      <router-view v-if="!$route.meta.keepAlive"/>
    </keep-alive>
  </div>
</template>

<script>
  import NavBarItem from "@/components/content/navbar/NavBarItem";
  export default {
    name: "SearchPage",
    components:{
      NavBarItem,
    },
    data(){
      return{
        key:this.$route.params.data,  //当前搜索词
      }
    },
    watch: {
      //监听路由切换,更新数据
      '$route' (to, from) {
        this.key = this.$route.params.data
      }
    }
  }
</script>

<style scoped>
.search{
  position: fixed;
  left: 137px;
  top: 44px;
  right: 0;
  bottom: 50px;
  padding: 10px 20px;
  background-color: #FFFFFF;
}
</style>
